import BaseEndpoint from '../../Base/endpoint'
import BaseNode from '../../Base/node'
import { v4 as uuidv4 } from 'uuid'
import $ from 'jquery'

class WhereOrderByNode extends BaseNode {
  [x: string]: any
  constructor(opts) {
    opts.id = opts.id || uuidv4()
    opts.width = 270
    opts.height = 200
    opts.icon = 'bi-filetype-sql'
    opts.nodeType = 'WHERE_ORDERBY'
    opts.titleColor = 'rgb(231, 102, 9)'
    opts.color = 'rgb(95 72 38)'
    opts.text = opts.text || '排序方式'
    opts.orderType = opts.orderType || 'ASC'
    opts.paramKey = opts.paramKey || ''
    //设置连接点
    opts.endpoints = opts.endpoints || [
      {
        id: uuidv4(),
        type: 'target',
        scope: 'run',
        dataKey: 'from',
        pointType: 'start',
        limitNum: 1,
        orientation: [-1, 0],
        pos: [0, 0.35],
        Class: BaseEndpoint
      },
      {
        id: uuidv4(),
        type: 'source',
        scope: 'run',
        dataKey: 'to',
        pointType: 'end',
        limitNum: 1,
        orientation: [1, 0],
        pos: [0, 0.35],
        Class: BaseEndpoint
      },
      {
        id: uuidv4(),
        type: 'source',
        scope: 'where',
        dataKey: 'where',
        pointType: 'output',
        orientation: [1, 0],
        pos: [0, 0.64],
        title: '输出值（条件）',
        Class: BaseEndpoint
      }
    ]
    super(opts)
  }

  mounted() {
    super.mounted()
    this.on('onUpdateOrderTypeParamKeyEvent', (data) => {
      if (data.id == this.id) {
        this.options.orderType = data.orderType
        this.options.paramKey = data.paramKey
        const $dom = $(this.dom).find('a')

        const paramKey = this.options.paramKey || '无参数名称'
        const orderType = this.options.orderType || 'ASC'
        //刷新显示
        $dom.html('&nbsp;&nbsp;' + paramKey + '&nbsp;' + orderType)
        $dom.attr('title', paramKey + '&nbsp;' + orderType)
      }
    })
  }
  public draw = (data: any) => {
    const titleColor = data.options.titleColor || '#304fed'

    const color = data.options.color || '#FFC107'

    const _container = `<div class= "base-node"  style="background:${color}"></div>`
    const container = $(_container)
      .css('top', data.top)
      .css('left', data.left)
      .css('width', data.options.width)
      .css('height', data.options.height)
      .attr('id', data.id)

    const _text = `<span class='text' style="background:${titleColor}">&nbsp;<i class="bi ${data.options.icon}"></i>&nbsp;${data.options.text}</span>`
    container.append(_text)

    const _exe = `<span style="
        color: #fff;
        text-align: left;
        width: 100%;
        display: inline-block;
        font-size: 12px;
        background: #d68e09;
    ">&nbsp;&nbsp;执行流</span>`

    container.append(_exe)

    const _split = `<span style="
        color: #fff;
        text-align: left;
        width: 100%;
        display: inline-block;
        font-size: 12px;
        margin-top: 27px;
        background: #d68e09;
    ">&nbsp;&nbsp;数据</span>`
    container.append(_split)

    const _split_params = `<span style="
        color: #fff;
        text-align: left;
        width: 100%;
        display: inline-block;
        font-size: 12px;
        margin-top:27px;
        background: #d68e09;
    ">&nbsp;&nbsp;排序字段和方式</span>`
    container.append(_split_params)
    const paramKey = data.options.paramKey || '无参数名称'
    const orderType = data.options.orderType || 'ASC'
    //执行的sql
    const params = `<span title="${paramKey}，${orderType} " style="
        width: 100%;
        display: inline-block;
        font-size: 12px;
        text-align: left;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    "><a>&nbsp;&nbsp;${paramKey}&nbsp;${orderType}</a></span>`
    container.append(params)
    container.dblclick(() => {
      const _id = this.id
      //触发事件
      this.emit('onModifyOrderTypeParamKeyEvent', {
        id: _id,
        orderType: data.options.orderType,
        paramKey: data.options.paramKey
      })
    })
    return container[0]
  }
}
export default WhereOrderByNode
